<template>
    <div id="app">
        <el-tabs
            tab-position="left"
            type="border-card"
            @tab-click="(tab) => (activeTab = tab.label)"
        >
            <el-tab-pane
                :label="item.label"
                v-for="(item, ind) in tabs"
                :key="ind"
            >
                <component :is="item.comp"></component>
            </el-tab-pane>
        </el-tabs>
        <!-- <div>
            <div class="nav">
                <router-link to="/">Home</router-link> |
                <router-link to="/about">About</router-link>
            </div>
            <router-view></router-view>
        </div> -->
    </div>
</template>
<script>
import Detail from "./components/detail/Index.vue";
import KForm from "./components/KForm/Index.vue";
export default {
    name: "App",
    components: {
        Detail,
        KForm,
    },
    data() {
        return {
            tabs: [
                {
                    label: "detail",
                    comp: Detail,
                },
                {
                    label: "kform",
                    comp: KForm,
                },
            ],
            activeTab: "",
        };
    },
};
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>
